<script setup>
import {ref} from 'vue'
import { updatePassword } from '@/api/my';
import { useUserStore } from '@/stores';
const goBack = () => {
    uni.navigateBack()
}
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const navBarTop = menuButtonInfo.top;
const navBarHeight = menuButtonInfo.height;
const formRef=ref()
const formData=ref({
    account:'',
    old_password:'',
    new_password:'',
    new_password1:''
})
const formRules=ref({
    account:[
        {required:true,message:'请输入账号',trigger:'blur'},
        {min:5,max:10,message:'用户必须是5-10的字符',trigger:'blur'}
    ],
    old_password:[
       
        {required:true,message:'请输入旧密码',trigger:'blur'},
        {pattern:/^\S{6,15}$/,min:6,max:15,message:'密码必须是6-15的非空字符',trigger:'blur'}
    ],
    new_password:[
        {required:true,message:'请输入新密码',trigger:'blur'},
        {pattern:/^\S{6,15}$/,min:6,max:15,message:'密码必须是6-15的非空字符',trigger:'blur'}
    ],
    new_password1:[
        {required:true,message:'请再次输入新密码',trigger:'blur'},
        {pattern:/^\S{6,15}$/,min:6,max:15,message:'密码必须是6-15的非空字符',trigger:'blur'},
        {validator:(rule,value,callback)=>{
            if(value!=formData.value.new_password){
                return callback(new Error('两次输入的密码不一致'))
            }else{
                return callback()
            }
        },message:'两次输入的密码不一致',trigger:'blur'}
    ]
})

const userStore=useUserStore()
const SubmitChange=async()=>{
    // console.log(formData.value)
    const valid = await formRef.value.validate()
    if(valid){
        const res=await updatePassword({account:formData.value.account,password:formData.value.old_password,new_password:formData.value.new_password})
        console.log(res)
        if(res.statusCode==200){
           
            userStore.removeToken()
            uni.navigateTo({
                path:'/pages/loginPage/index'
            })
            setTimeout(()=>{
                uni.showToast({
                    title:'修改成功',
                    icon:'success'
                }),
                500
            })
        }
        else{
            uni.showToast({
                title:`${res.msg}`,
                icon:'error'
            })
        }
        }
           
        else{
            uni.showToast({
                title:'修改失败',
                icon:'error'
            
            })
        }
        formData.value.account=''
        formData.value.old_password=''
        formData.value.new_password=''
        formData.value.new_password1=''
}
</script>

<template>
<view class="page">
    <div class="haha">
        <div class="navigate-bar" :style="{paddingTop: navBarTop + 'px',lineHeight: navBarHeight + 'px'}">
            <img src="../../static/backArrow.png" alt="" class="backArrow"  @click="goBack">
            <h2>修改密码</h2>
        </div>
<div class="bigwrapper" :style="{paddingTop: navBarTop+navBarHeight + 5 +'px'}">
    <div class="rapper"><img src="../../static/password1.png" style="width:40px;height:40px;margin-bottom:15px;margin-top:30px;" alt="" ></div>
    <div class="wrapper">
       
        <div class="smallwrapper">
          
        <up-form ref="formRef" :model="formData" :rules="formRules">
            <up-form-item label="账号" label-width="100px" prop="account">
                <up-input v-model="formData.account" class="unique" placeholder="请输入账号"></up-input>
            </up-form-item>
            <up-form-item label="密码" label-width="100px" prop="old_password">
                <up-input v-model="formData.old_password" class="unique" placeholder="请输入密码" type="password"></up-input>
            </up-form-item>
            <up-form-item label="新密码" label-width="100px" prop="new_password">
                <up-input v-model="formData.new_password" class="unique" placeholder="请输入新密码" type="password"></up-input>
            </up-form-item>
            <up-form-item label="确认新密码" label-width="100px" prop="new_password1">
                <up-input v-model="formData.new_password1" placeholder="请再次输入新密码" type="password" ></up-input>
            </up-form-item>
        </up-form>
    </div>
        
        
    </div>
    <up-button size="big" type="primary"  shape="circle" @click="SubmitChange">提交</up-button>
</div>
       
       
    </div>
    
</view>
</template>

<style  scoped lang="scss">
:deep(.u-form-item.data-v-b4fd400b){
    border-bottom:1px solid #e6e6e6;
}
::v-deep.u-button{
 width:270px !important;
 margin-top:10px;
}
.page{
    height:100vh;
    background-color: rgb(239,240,244);
}
.navigate-bar{
        display: flex;
        justify-content: center;
        position: fixed;
        width:100%;
        background-color: rgb(239,240,244);
        .backArrow{
            width: 30px;
            height: 30px;
            position: absolute;
            left:1%;
        }
        h2{
            justify-items:end;
        }
    
    }
.haha{
    height:100vh;
    background-color:rgb(239,240,244);
.bigwrapper{

    .rapper{
        display: flex;
        justify-content: center;
    }

    .wrapper{
        margin:0 40px 30px 40px;
        height: 50%;
        background-color: white;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        .smallwrapper{
            width: 90%;
            display: flex;
            justify-content: center;
            flex-direction: column;;
            ::v-deep.unique{
                border-bottom: 1px #e6e6e6 solid;
            }
        }
}
}
}
</style>